<template>
  <div class="public-list">
    <a-table
      :data="publicList"
      :columns="columns"
      :loading="loading"
      :pagination="{
        total: count,
        current: current,
        pageSize: pageSize,
        showTotal: true,
        showPageSize: true,
      }"
      @page-change="handlePageChange"
      @page-size-change="handlePageSizeChange"
    >
      <template #avatar="{ record }">
        <a-avatar shape="square" @click="handleGetInfo(record)">
          <img alt="avatar" :src="record.avatarMinUrl" />
        </a-avatar>
      </template>
      <template #issave="{ record }">
        <a-switch
          :model-value="record.issave"
          @change="(value) => handleSaveChange(record, Boolean(value))"
        />
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { getPublickList, getPublickInfo } from '@/api/weixin';
  import type { TableColumnData } from '@arco-design/web-vue';

  const props = defineProps<{
    wxid: string;
  }>();

  // 分页相关
  const current = ref(1);
  const pageSize = ref(10);
  const count = ref(0);
  const loading = ref(false);
  const publicList = ref([]);

  const columns: TableColumnData[] = [
    {
      title: '头像',
      slotName: 'avatar',
      width: 80,
    },
    {
      title: '公众号名称',
      dataIndex: 'nick',
    },
    {
      title: 'wxid',
      dataIndex: 'wxid',
    },
    {
      title: '是否保存信息',
      slotName: 'issave',
    },
  ];

  // 获取公众号列表
  const fetchList = async (wxid: string) => {
    loading.value = true;
    try {
      const res: any = await getPublickList(wxid, {
        page: current.value,
        pageSize: pageSize.value,
        field: {},
      });
      if (res.code === 20000) {
        count.value = res.data.count;
        publicList.value = res.data.list;
      } else {
        publicList.value = [];
      }
    } catch (error) {
      publicList.value = [];
      console.error('获取公众号列表失败:', error);
    }
    loading.value = false;
  };
  // 处理页码变化
  const handlePageChange = async (page: number) => {
    current.value = page;
    await fetchList(props.wxid);
  };

  // 处理每页条数变化
  const handlePageSizeChange = async (size: number) => {
    pageSize.value = size;
    current.value = 1;
    await fetchList(props.wxid);
  };

  const handleSaveChange = async (record: any, value: boolean) => {
    try {
      // TODO: 调用更新群配置的API
      Message.success('设置成功');
      await fetchList(props.wxid);
    } catch (error) {
      Message.error('设置失败');
    }
  };

  const handleGetInfo = async (record: any) => {
    try {
      const res: any = await getPublickInfo({
        mywxid: props.wxid,
        wxid: record.wxid,
      });
      if (res.code === 20000) {
        // friendInfo.value = JSON.stringify(res.data.result, null, 2);
        await fetchList(props.wxid);
      } else {
        Message.error(res.msg || '获取微信信息失败');
      }
    } catch (error) {
      Message.error('获取微信信息失败');
    }
  };
  // 监听wxid变化获取公众号列表
  watch(
    () => props.wxid,
    async (newVal) => {
      if (newVal) {
        current.value = 1;
        await fetchList(newVal);
      }
    },
    { immediate: true }
  );

  // 暴露刷新方法
  defineExpose({
    refresh: () => fetchList(props.wxid),
  });
</script>
